<template>
    <div>
        <v-row no-gutters>
            <v-col cols="12" sm="6" :order="type === 1 ? 'first' : 'last'">
                <div class="w-full h-full flex flex-col items-center justify-center">
                    <slot name="content">
                        <Title class="mb-0" title="Custom Embroidered Patches"
                            content="The maximum number of colors a pa">
                            <template #content>
                                <div class="w-350px m-auto">
                                    <EvaluateOther />
                                    Source high-quality custom products with ease.Connect directly with top-rated
                                    factories
                                    and
                                    expertdesign teams to bring your vision to life-fastturnaround times and competitive
                                    pricing
                                    guaranteed.
                                    <div>
                                        <ul class="mt-2 text-[14px] md:text-[14px] text-left! inline-block mx-auto">
                                            <li class="list-inside-red mb-1">Crafted with precision</li>
                                            <li class="list-inside-red  mb-1">Features merrowed borders and iron-on
                                                backings
                                            </li>
                                            <li class="list-inside-red  mb-1">Offers unique and customizable designs
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </template>
                        </Title>
                        <template v-if="showBtn">
                            <v-btn elevation="0" color="#1D498C" class="w-full! mt-4 text-white sm:w-[80%]!">
                                View All Custom Products
                            </v-btn>
                            <v-btn elevation="0" color="#39c464" class="w-full! mt-4 text-white sm:w-[80%]!">
                                View All Custom Products
                            </v-btn>
                        </template>
                    </slot>
                </div>
            </v-col>
            <v-col cols="12" sm="6" :order="type === 1 ? 'last' : 'first'">
                <img src="/7.jpg" alt="" class="w-[100%] h-auto">
            </v-col>
        </v-row>
    </div>
</template>

<script setup lang="ts">
import EvaluateOther from '../evaluate/evaluateOther.vue';
import { Title } from '../Title';

withDefaults(defineProps<{
    type?: 1 | 2
    showBtn?: boolean
}>(), {
    type: 1,
    showBtn: true
})
</script>
